@import "variables";

/* for events_new page and slide_new page */
.new-events,
.new-slides {
  .panel-header.with-hr::after {
    margin: 10px 0;
  }

  .events-wrap,
  .slides-wrap {
    margin-top: 20px;
  }

  .slides-wrap .cover {
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      display: none;
      color: $gray;
      font-size: 16px;
      font-weight: lighter;
    }

    .upload-done {
      font-size: 12px;
    }
  }

  .file-upload,
  .file-info {
    margin : 0 auto;
  }

  .file-upload {
    float: left;
    padding-top: 20px;
    height: 345px;
    background-color: $white;

    .cover {
      margin: 0 20px 0;
      height: 270px;
      background-color: $concrete;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .cover-upload {
      position: relative;
      margin: 16px 0 0 20px;

      input {
        position: absolute;
        top: 0;
        left: 58px;
        opacity: 0;
      }

      span {
        color: $gray;
        font-size: 12px;
        font-weight: lighter;
        vertical-align: top;
      }

      .upload-lecture,
      .upload-audio,
      .live-record,
      .upload-cover {
        position: relative;
        display: inline-block;
        height: 17px;

        span {
          display: inline-block;
        }

        .icon {
          margin-left: 6px;
        }
      }

      .upload-lecture,
      .upload-cover {

        .upload {
          width: 14px;
          height: 15px;
          background-image: image-url("events/icon-upload@2x.png");
          background-size: contain;
        }

        input {
          width: 14px;
          height: 15px;
        }
      }

      .upload-audio {
        margin-left: 16px;

        .upload {
          width: 20px;
          height: 15px;
          background-image: image-url("events/icon-camera@2x.png");
          background-size: contain;
        }

        input {
          width: 20px;
          height: 15px;
        }
      }

      .live-record {
        display: none;
        margin-left: 12px;

        .icon-close {
          width: 15px;
          height: 15px;
          background-image: image-url("events/icon-close@2x.png");
          background-size: contain;
        }
      }
    }
  }

  .file-info {
    margin-top: 0;
    margin-left: 40px;

    .btn-default {
      float: right;
      margin-top: 20px;
    }

    .btn-warning {
      margin-left: 20px;
    }

    textarea#slide_description {
      height: 190px;
    }
  }
}

@media (min-width: 320px) {
  .new-events,
  .new-slides {

    .panel {
      margin-bottom: 40px;
      width: 100%;
      padding: 0 20px;
    }

    .file-upload,
    .file-info {
      width: 100%;
    }

    .file-info {
      margin: 20px auto 0;
      padding: 0 20px 20px;

      .btn-delete {
        display: none;
      }
    }

    .form-default {

      input,
      textarea {
        width: 100%;
      }

      .time {

        input:last-child {
          margin-left: 65px;
        }

        span {
          display: none;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .new-events,
  .new-slides {

    &.panel {
      margin: 30px auto 80px;
      width: 74.21875%;
    }

    .file-upload,
    .file-info {
      float: none;
      width: 476px;
    }

    .file-info {
      margin: 30px auto 0;
      padding: 0;
    }
    .form-default {

      input,
      textarea {
        width: 100%;
      }

      .time {
        input {
          max-width: 187px;
        }
        input:last-child {
          margin-left: 0;
        }

        span {
          display: inline-block;
        }
      }
    }
  }
}

@media (min-width: 1024px) {
  .new-events,
  .new-slides {

    &.panel {
      width: 100%;
      max-width: 1180px;
      padding: 0 30px;
    }

    .file-upload {
      float: left;
      width: 45%;
      max-width: 486px;
    }
    .file-info {
      float: left;
      width: 476px;
      margin: 0 0 0 40px;
      .btn-delete {
        display: inline-block;
      }
    }
  }
}
